<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4-1 使用组件的细节点</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="root">
        <table>
            <tbody>
                <!-- 
                 http://n188.net/details/8-computerLanguage-2299-392   
                <row></row>
                <row></row>
                <row></row> -->
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>
    </div>

    <script>
        Vue.component('row', {
            template: '<tr><td>{{content}}</td></tr>',
            // vue的组件中为什么data必须是一个函数？
            // 在Vue组件中，data属性必须是一个函数，而不是一个直接的对象。这是因为JavaScript中对象是通过引用传递的，如果data直接是一个对象的话，那么每个实例将共享同一个data对象。
            // 当一个实例修改data时，会影响到其他所有的实例。这显然不是我们想要的结果。而将data设为一个函数，每次创建一个新实例后，调用此函数，从而返回一个新对象作为data，
            // 这样每个实例都有自己的data对象，不会互相干扰。这就保证了数据的独立性和安全性。简单来说，Vue组件中的data之所以必须是一个函数，
            // 是为了保证每个组件实例可以维护一份被返回对象的独立的拷贝，防止各组件实例之间数据互相污染。这就是Vue设计的精妙之处，也是我们必须遵守的重要规则。
            
            // 为什么new Vue这个里面的data可以放一个对象？
            // 因为这个类创建的实例不会被复用。它只会new一次，不用考虑复用。

            // data:{
            //     content:'this is a row'
            // }
            data() {
                return {
                    content: 'this is a row'
                }
            }
        })

        var vm = new Vue({
            el: '#root'
        })
    </script>
</body>

</html>